Meteor এবং Angular Integration

Meteor এবং Angular দুটি শক্তিশালী ফ্রেমওয়ার্ক, যেগুলি আলাদাভাবে ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। Meteor রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন এবং একক কোডবেস ব্যবস্থাপনার সুবিধা প্রদান করে, যেখানে Angular একটি জনপ্রিয় front-end framework যা সিঙ্গল-পেজ অ্যাপ্লিকেশন (SPA) তৈরিতে ব্যবহৃত হয়।

এই দুটি ফ্রেমওয়ার্ক একত্রে ব্যবহার করা সম্ভব, যেখানে Meteor backend এবং real-time data সিঙ্ক্রোনাইজেশনের কাজ করে, আর Angular frontend অংশের কাজ করে। Meteor এবং Angular-এর integration ডেভেলপারদের দ্রুত এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সহায়ক।

Meteor এবং Angular-এর Integration প্রক্রিয়া

Meteor এবং Angular একত্রে ব্যবহার করার জন্য, বেশ কিছু পদক্ষেপ অনুসরণ করতে হবে:

১. প্রথমে Meteor প্রজেক্ট তৈরি করুন:

প্রথমে Meteor এর প্রোজেক্ট তৈরি করতে হবে। এটি করতে নিচের কমান্ডটি ব্যবহার করুন:

meteor create my-angular-app
cd my-angular-app

২. Angular CLI ইনস্টল করুন:

Meteor অ্যাপ্লিকেশনটির সাথে Angular যোগ করতে Angular CLI ব্যবহার করা হবে। Angular CLI ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install -g @angular/cli

৩. Angular অ্যাপ তৈরি করুন:

Meteor প্রকল্পের ভিতরে Angular অ্যাপ তৈরি করতে Angular CLI ব্যবহার করুন।

ng new client --routing --style=scss

এটি একটি নতুন Angular অ্যাপ্লিকেশন তৈরি করবে, যার মধ্যে routing এবং SCSS স্টাইল ফাইল থাকবে। আপনার অ্যাপটি client নামে একটি ফোল্ডারে তৈরি হবে।

৪. Meteor থেকে Angular এর জন্য API তৈরি করুন:

Meteor ফ্রেমওয়ার্কটি backend কাজের জন্য ব্যবহৃত হবে, তাই Angular অ্যাপ্লিকেশনে যে ডেটা প্রদর্শন করা হবে, তা Meteor API থেকে আসবে।

এখানে একটি সাধারণ API তৈরি করা হয়েছে:

// server/main.js
import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';

export const Tasks = new Mongo.Collection('tasks');

Meteor.startup(() => {
  // Example data
  if (Tasks.find().count() === 0) {
    Tasks.insert({ text: 'Learn Meteor and Angular' });
    Tasks.insert({ text: 'Build a full stack app' });
  }
});

// API to get tasks
Meteor.methods({
  'tasks.get'() {
    return Tasks.find().fetch();
  },
});

এই API কে Angular অ্যাপ্লিকেশনের মাধ্যমে কল করা হবে।

৫. Angular থেকে Meteor API কল করা:

এখন Angular অ্যাপ্লিকেশনে Meteor API থেকে ডেটা ফেচ করতে হবে। Angular অ্যাপ্লিকেশন HTTPClient ব্যবহার করবে Meteor API কল করার জন্য।

Angular Service তৈরি করুন:

// src/app/services/task.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private apiUrl = 'http://localhost:3000'; // Meteor server URL

  constructor(private http: HttpClient) { }

  getTasks(): Observable<any> {
    return this.http.get(`${this.apiUrl}/tasks.get`);
  }
}

Angular Component তৈরি করুন:

// src/app/components/task-list/task-list.component.ts
import { Component, OnInit } from '@angular/core';
import { TaskService } from '../../services/task.service';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
  tasks: any[] = [];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.taskService.getTasks().subscribe((data: any) => {
      this.tasks = data;
    });
  }
}

৬. Meteor এবং Angular এর জন্য CORS সেটআপ করুন:

Angular অ্যাপ Meteor API থেকে ডেটা ফেচ করবে, তাই CORS (Cross-Origin Resource Sharing) সমস্যা হতে পারে। CORS সমাধান করতে Meteor এর webapp প্যাকেজ ব্যবহার করা যায়।

Meteor CORS সমাধান:

meteor add webapp

এখন Meteor অ্যাপ্লিকেশনে CORS সেট আপ করুন:

// server/main.js
import { WebApp } from 'meteor/webapp';

WebApp.connectHandlers.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

এটি Angular অ্যাপ্লিকেশনকে Meteor API থেকে ডেটা ফেচ করার অনুমতি দেবে।

৭. Meteor এবং Angular অ্যাপের সমন্বয়:

Meteor-এর client ফোল্ডারে Angular অ্যাপটি কপি করুন এবং Angular অ্যাপের build ফাইল Meteor এর public ফোল্ডারে রেখে Angular অ্যাপটি Meteor অ্যাপ্লিকেশনের মাধ্যমে চালান।

1. Angular build করুন:

cd client
ng build --prod

2. Meteor এ Angular অ্যাপটি কপি করুন:

cp -r dist/* ../public

3. Meteor অ্যাপ চালান:

meteor

এখন আপনার Meteor অ্যাপ Angular-এর মাধ্যমে frontend এবং Meteor backend দ্বারা ডেটা পরিচালিত হবে।

সারাংশ

Meteor এবং Angular ইন্টিগ্রেশন একটি শক্তিশালী ফ্রেমওয়ার্ক তৈরি করতে সাহায্য করে, যেখানে Meteor backend সাপোর্ট এবং real-time data সিঙ্ক্রোনাইজেশন প্রদান করে, এবং Angular frontend অংশের কাজ করে। এই ইন্টিগ্রেশন ডেভেলপারদের জন্য অ্যাপ্লিকেশন ডেভেলপমেন্টে গতি এবং স্কেলেবিলিটি বৃদ্ধি করে।